<template>

  <div class="groupBuys w-1200">
    <div class="content">
      <div class="head-box">
        <div> <span class="title">团购专区</span></div>
        <div>
          <span class="more-tips">查看全部</span> <img src="@/static/easydrug/homePage/more_icon.png"
            class="right-arrow" /></div>
      </div>
      <div class="group-list">
        <div v-for="(item, index) in groupBuyList" :key="index" class="group-item">
          <img class="brug-img" :src="item.img" />
          <div class="groupbuy-box">
            <img class="icon" src="@/static/easydrug/homePage/groupbuy_icon.png" />
            <span class="count">{{ item.groupBuyingCount }}人已拼团</span>
          </div>
          <div class="info">
            <div class="name">{{ item.name }}</div>
            <div class="tablet-box">
              <div class="tablet">{{ item.tablet }}</div>
              <div class="soldCount">已售{{ item.soldCount }}件</div>
            </div>
            <div class="price-box">
              <div class="price"><span class="price-unit">￥</span>{{ item.price }}</div>
              <div class="retailPrice">建议零售价:￥{{ item.retailPrice }}</div>
            </div>
            <div class="companyName">{{ item.companyName }}</div>
            <div class="effectiveDate">效期优于:{{ item.effectiveDate }}</div>
            <div class="btns">
              <el-input-number class="input-number" v-model="item.num" @change="handleChange"></el-input-number>
              <el-button class="btn">立即参团</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>


export default {
  name: "groupBuyDisplay",
  components: {

  },
  props: [],
  data() {
    return {
      groupBuyList: []
    };
  },
  computed: {

  },
  watch: {},

  created() {
    this.initData()
  },

  methods: {
    initData() {
      this.groupBuyList = [
        this.getDemoName('布洛芬缓释胶囊'),
        this.getDemoName('感力清磷酸奥司他韦胶囊'),
        this.getDemoName('仁和可立复方氨酚烷胺胶囊'),
        this.getDemoName('布洛芬缓释胶囊'),
        this.getDemoName('感力清磷酸奥司他韦胶囊'),
      ]
      console.log("this.groupBuyList=", this.groupBuyList)
    },
    
    getDemoName(name) {
      return {
        img: require("@/static/easydrug/homePage/common.png"),
        name,
        tablet: '0.8G*64片(盒)',
        soldCount: 800,
        price: 39.50,
        retailPrice: 49.80,
        companyName: '江中药业股份有限公司',
        effectiveDate: '2026-02-28',
        num: 10,
        hotRecommentingCount: 543
      }
    },
    handleChange(value) {
      console.log(value);
    }
  },
};
</script>
<style scoped lang="less">
.groupBuys {
  height: auto;
  display: flex;
  max-width: @width;
  flex-direction: column;

  .content {
    width: 100%;
    margin-top:20px;
    background: linear-gradient(180deg, #FFF1F0 0%, #FFFFFF 100%);
    border-radius: 8px 8px 0px 0px;
    border: 1px solid #FFC6C6;
    padding: 21px 20px 24px 20px;

    .head-box {
      display: flex;
      justify-content: space-between;

      .title {
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 22px;
        color: #333333;
      }

      .more-tips {
        font-family: MicrosoftYaHei, MicrosoftYaHei;
        font-weight: normal;
        font-size: 14px;
        color: #333333;
        vertical-align: middle;
      }

      .right-arrow {
        width: 16px;
        height: 16px;
        margin-left: 3px;
        vertical-align: middle;
      }
    }

    .group-list {
      width: 100%;
      display: flex;
      flex-wrap: wrap;

      .group-item {
        margin-top: 20px;
        margin-right: 12px;
        display: flex;
        width: 222px;
        flex-direction: column;
        background: #fff;
        position: relative;

        .brug-img {
          width: 222px;
          height: 222px;
        }

        .groupbuy-box {
          position: absolute;
          top: 10px;
          left: 10px;
          background: #EF1F1F;
          border-radius: 25px;
          padding: 3px 10px;
          

          .icon {
            width: 12px;
            height: 12px;
            vertical-align: middle;
          }

          .count {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 12px;
            color: #FFFFFF;
            text-align: left;
            margin-left: 3px;
            vertical-align: middle;
          }
        }

        .info {
          padding: 12px 12px 0px 12px;

          .name {
            font-family: PingFang SC, PingFang SC;
            font-weight: 600;
            font-size: 16px;
            color: #333333;
          }

          .tablet-box {
            width: 100%;
            display: flex;
            justify-content: space-between;
            margin-top: 8px;
            align-items: center;

            .tablet {
              font-family: PingFang SC, PingFang SC;
              font-weight: 400;
              font-size: 12px;
              color: #EF1F1F;
              border-radius: 3px 3px 3px 3px;
              padding:2px 8px;
            }

            .soldCount {
              font-family: Arial, Arial;
              font-weight: 400;
              font-size: 13px;
              color: #ABABAB;
              line-height: 22px;
              text-align: left;
            }
          }

          .price-box {
            margin-top: 8px;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .price-unit {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 14px;
              color: #EF1F1F;
            }

            .price {
              font-family: DIN Alternate, DIN Alternate;
              font-weight: bold;
              font-size: 22px;
              color: #EF1F1F;
            }

            .retailPrice {
              font-family: Arial, Arial;
              font-weight: 400;
              font-size: 12px;
              color: #666666;
            }
          }

          .companyName {
            margin-top: 8px;
            font-family: Arial, Arial;
            font-weight: 400;
            font-size: 14px;
            color: #999999;
          }

          .effectiveDate {
            margin-top: 8px;
            font-family: Arial, Arial;
            font-weight: 400;
            font-size: 14px;
            color: #999999;
          }

          .btns {
            margin-top: 10px;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .input-number {
              width: 110px !important;
              height: 30px !important;
              line-height: 28px !important;

              /deep/ .el-input__inner {
                height: 30px !important;
                line-height: 30px !important;
                padding-left: 10px !important;
                padding-right: 10px !important;
              }

              /deep/ .el-input-number__decrease {
                width: 30px !important;
              }

              /deep/ .el-input-number__increase {
                width: 30px !important;
              }
            }

            .btn {
              height: 30px !important;
              padding: 3px 10px !important;
              background: #EF1F1F;
              border-radius: 4px 4px 4px 4px;
              font-family: PingFang SC, PingFang SC;
              font-weight: 400;
              font-size: 14px;
              color: #FFFFFF;
            }
          }
        }


        &:nth-child(5n) {
          margin-right: 0px !important;
        }
      }
    }
  }
}
</style>
